<template>
	<view class="content content-bottom" @touchmove="touchMove" @touchend="touchMove">
		<footer-menu :active="'my'" />
		<login :title="login_title" v-if="is_login" v-on:x="no_login" v-on:plogin="to_login()"></login>
		<!-- 顶部 -->
		<view class="top-box" :style="'height:'+menuTop+';'"></view>
		<view class="header" v-if="token" :style="'padding-top: '+menuTop+';'">
			<!-- 看视频兑换更改提示 -->
			<view v-if="isShowVideoSet === true" class="top-notice-box">
				<uni-section title="滚动提示" subTitle="" type="line">
					<uni-notice-bar speed=30 show-icon scrollable :text="videoSetNotice" />
				</uni-section>
			</view>
			<view class='user'>
				<view class="user-portrait" @tap="goDump('/pages/my/userInfo')">
					<image class="user-portrait-img"
						:src="member.avatar?member.avatar:'https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/mrtx.png'">
					</image>
				</view>
				<view class="user-info">
					<view class="user-info-top">
						<view class="user-info-top-name">{{ member.nick_name ? member.nick_name : '未完善信息' }}</view>
					</view>
					<view class="user-info-bottom">
						加入日期：{{ member._create_time }}
					</view>
				</view>
			</view>
			<view class="h-box" :style="'opacity:'+hBoxOpacity">
				<view class="header-title" :style="hBoxOpacity!=0?'margin-top:'+menuTop+';height:'+menuHeight+';':''">我的
				</view>
			</view>
			<!-- 提现 -->
			<view class="withdrawal">
				<View class="withdrawal-content">
					<view class="withdrawal-box2" @click="go_jifen()">
						<view class="withdrawal-box-money">
							<text class="jf-rd">{{ integerTotal }}</text>
							<view v-if="jifen_list_length > 0" class="red-message"></view>
						</view>
						<view class="withdrawal-text">人康积分</view>
					</view>
					<view class="withdrawal-xian"></view>
					<view class="withdrawal-box2" @click="goDump('/pages/my/MyCouponList/MyCouponList')">
						<view class="withdrawal-box-money">
							<text class="jf-rd">{{ getMyCouponCount || 0 }}</text>
						</view>
						<view class="withdrawal-text">优惠券</view>
					</view>
				</View>
			</view>
			<!-- 二维码 -->
			<view class="qcode">
				<view class="qcode-box">
					<view class="qcode-icon"></view>
					<text>我的二维码</text>
				</view>
				<view class="qcode-button" @click="show_qcode(true)">查看使用</view>
			</view>
		</view>
		<!-- 新菜单栏 -->
		<view class="menu-box">
			<view v-if="isShowPickUp" @click="goToPickUp" class="info">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/mall/me_icon_tihuo.png"></image>
				<view class="text">提货记录</view>
				<image v-if="showPickupRewards" mode="aspectFit" class="menu-box_tipsIcon"
					src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/mall/tips-getRewards.png"></image>
			</view>
			<view v-if="isShowPickUp" class="line"></view>
			<view @click="goToTaskCenter" class="info" id="taskBox">
				<view class="newMessage" v-if="!showAppTask"></view>
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/mall/me_icon_dizhi.png"></image>
				<view class="text">任务中心</view>
			</view>
			<view class="line"></view>
			<view class="info" @click="goToOrder">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/mall/me_icon_dingdan.png">
				</image>
				<view class="text">我的订单</view>
			</view>
		</view>
		<!-- 排行帮 -->
		<view class="tap xiding" :style="'top:'+(contentTopcount+10)+'px'">
			<view class="tap-list">
				<view @click="tap(1)" :class="type==1?'tap-item tap-items':'tap-item' ">本店排名</view>
				<view @click="tap(2)" :class="type==2?'tap-item tap-items':'tap-item' ">城市排名</view>
			</view>
			<view class="tap-lists">
				<view class="top">
					<view class="top-item-two">排名</view>
					<view class="top-item-h"></view>
					<view class="top-item">姓名</view>
					<view class="top-item-h"></view>
					<view class="top-item">视频观看个数</view>
				</view>
				<view class="tap-user" style="background-color: #D4F1DD">
					<view class="num">
						<view style="width: auto;" v-if="type==1" class="num-value">
							{{ rnk_today_list.myStoreRank.rank == -1 ? '未上榜' : rnk_today_list.myStoreRank.rank }}
						</view>
						<view style="width: auto;" v-if="type==2" class="num-value">
							{{ rnk_today_list.myCityRank.rank == -1 ? '未上榜' : rnk_today_list.myCityRank.rank }}
						</view>
						<view class="num-msg">我的排名</view>
					</view>
					<view class="user-name">
						{{ type == 1 ? rnk_today_list.myStoreRank.name : rnk_today_list.myCityRank.name }}
					</view>
					<view class="item-value" style="color: rgba(255, 160, 30, 1);">
						{{ type == 1 ? rnk_today_list.myStoreRank.score : rnk_today_list.myCityRank.score }}
					</view>
					<view class="l-sjiaos"></view>
					<view class="r-sjiaos"></view>
				</view>
				<scroll-view scroll-y="true" class="paihang-list" :style="hBoxOpacity==1?'overflow-x: auto;':''"
					@touchmove="touchMove" @touchend="touchMove" @scrolltolower="end">
					<view :class="index>2?'paihang-item':'paihang-item hong'"
						v-for="(item,index) in (type==1?rnk_today_list.storeRank:rnk_today_list.cityRank)">
						<view class="num">
							<image style="width: 56rpx;height: 66rpx;" mode="widthFix" v-if="index<=2"
								:src="'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/'+(index+1)+'.png'">
							</image>
							<text v-if="index>2">{{ index + 1 }}</text>
						</view>
						<view class="user-name">{{ item.name }}</view>
						<view class="item-value" style="color: rgba(255, 160, 30, 1);">{{ item.score }}</view>
					</view>
					<!-- <no_order  :icon_url="'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/empty-state_paiming@2x.png'"></no_order> -->
					<no_order v-if="type==2 && rnk_today_list.cityRank.length==0"
						:icon_url="'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/empty-state_paiming@2x.png'"
						:title="msg"></no_order>
				</scroll-view>
			</view>
		</view>
		<view style="width: 1upx;height: 200upx;"></view>
		<view class="zhezhao" catchtouchmove="true" v-show="is_show_qcode"></view>
		<view class="pop-qcode" catchtouchmove="true" v-show="is_show_qcode">
			<view class="pop-qcode-box">
				<image class="pop-down" @click="set_is_show_qcode"
					src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/qcode-down.png" mode=""></image>
				<view class="pop-gun"></view>

				<view class="pop-qcode-img">
					<uqrcode class="uqrcode" ref="uqrcodes"></uqrcode>
				</view>

				<view class="pop-barcode-img">
					<tkiBarcode cid="code128" :loadMake="false" :opations="barcodeOpations" :onval="true"
						format="code128" :val="barcodeNum" ref="code128" />
					<view class="pop-barcode-img-title">收银机核销请扫描条形码</view>
				</view>
			</view>
		</view>

		<!-- </scroll-view> -->
		<app-drainage ref="appDrainage"></app-drainage>
	</view>
</template>
<script>
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	import {
		imgBasePath
	} from "@/common/config";
	import appDrainage from "@/pages/my/components/appDrainage.vue";

	export default {
		components: {
			tkiBarcode,
			appDrainage
		},
		data() {
			return {
				isLogin: true,
				userInfo: {},
				user_sign_info: [],
				member: [],
				is_login: false,
				is_show: true,
				token: uni.getStorageSync("token"),
				type: 1,
				rnk_today_list: [],
				msg: "",
				login_title: "",
				is_show_qcode: false, // 弹窗展示 二维码
				qrcodeContent: '', // 二维码s生成所需字符串
				barcodeNum: '', // 条形码数据
				integerTotal: 0, // 拥有的所有积分
				jifen_list_length: 0,
				menuHeight: uni.getStorageSync('menuInfo').menuHeight,
				menuTop: uni.getStorageSync('menuInfo').menuTop,
				contentTopcount: uni.getStorageSync('menuInfo').contentTopcount,
				getMyCouponCount: "",
				isShowTaskEnter: false,
				imgBasePath,
				hBoxOpacity: 0,
				scrollTop: 0,
				isShowPickUp: false, // 是否展示提货按钮
				isShowVideoSet: false, // 是否展示修改提示语
				videoSetNotice: '', // 提示语
				// offsetTop:'150px'

				barcodeOpations: {
					width: 4, //设置条之间的宽度
					height: 110, //高度
					displayValue: false, //是否在条形码下方显示文字
				},
				page: 1,
				showAppTask: true,
				isGetAttTask: false,
				showPickupRewards: false
			}
		},
		onLoad(option) {
			uni.hideTabBar();
		},
		onShow() {
			this.is_show = true;
			this.is_login = uni.getStorageSync("token") ? false : true;
			this.get_user_sign_info()
			this.get_member()
			this.token = uni.getStorageSync("token")
			this.get_paihang()
			this.show_qcode(false);
			this.getIntegralExpiredList();
			this.get_getMyCouponList()
			this.getTaskEnterLimits()
			this.getPickUpAuth()
			if (this.isGetAttTask) this.getNewTask();
		},
		onReady() {
			this.getNewTask()
		},
		methods: {
			goToNewPeopleTask() {
				uni.navigateTo({
					url: `/pages/newPeopleTask/index?source=1`
				});
			},
			async getNewTask() {
				let data = await this.$javaCircle.doRequest("get", "vs/newbie/weatherTaskRead", '', 'json', true)
				if (data.data.code === 0) {
					if (!data.data.data) {
						this.showNewTask()
					}
					this.showAppTask = data.data.data
					this.isGetAttTask = true
				}
			},
			showNewTask() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#taskBox').boundingClientRect(data => {
					this.$refs.appDrainage.boxData = data
					this.$refs.appDrainage.init()
				}).exec();
			},
			// 跳转到提货列表
			goToPickUp() {
				uni.navigateTo({
					url: '/pages/pickup/list'
				});
			},
			// 跳转到订单
			goToOrder() {
				uni.navigateTo({
					url: '/shop/pages/order/index'
				});
			},
			//判断是否有提货权限
			getPickUpAuth() {
				this.$javaApiErp.doRequest("post", '/rkkt/pickuplog/getShowPickupShop', {}, 'json').then(res => {
					if (res.data.data == 1) {
						this.isShowPickUp = true
						this.getPickUpRewards();
					}
				})
			},
			// 判断提货是否有奖励
			getPickUpRewards() {
				this.$javaApiErp.doRequest("get", '/rkkt/pickuplog/getTolRewardNum', {}, 'json').then(res => {
					if (res.data.data > 0) {
						this.showPickupRewards = true
					} else {
						this.showPickupRewards = false
					}
				})
			},
			
			// 获取入口权限
			getTaskEnterLimits() {
				this.$request("marketing/user/activity/available", {
						params: {
							source: "MyTaskPage",
							activityType: "New_People_Task"
						}
					})
					.then(data => {
						this.isShowTaskEnter = data.result;
					}).catch(error => {})
			},
			// 展示url
			show_qcode(type) {
				var that = this;
				that.$javaApiTwo.doRequest("post", "/customerkt/integral/myIntrgral", {}, 'json').then(res => {
					if (res.data.code == 0) {
						that.qrcodeContent = res.data.data.qrcodeContent;
						that.integerTotal = res.data.data.integerTotal;
						const systemInfo = uni.getSystemInfoSync()
						const width = 270 * systemInfo.windowWidth / 375;
						if (type) {
							that.is_show_qcode = true
							this.$refs['code128']._makeCode()
							that.$refs.uqrcodes.make({
								mode: 'view', // 默认为view
								size: width,
								text: res.data.data.qrcodeContent
							})
							that.$dadian("showQcode");
						}
					}
				})
			},
			//获取优惠卷数量
			get_getMyCouponList() {
				this.$javaApiErp.doRequest("post", '/group/customer/coupon/getMyCouponCount', {}, 'json').then(res => {
					this.getMyCouponCount = res.data.data
				})
			},
			// 任务中心
			goToTaskCenter() {
				uni.navigateTo({
					url: '/taskCenter/index/index?showAppTask=' + this.showAppTask
				})
			},
			// 用户即将过期积分列表
			getIntegralExpiredList() {
				var that = this;
				var data = {
					page: 1,
					pageSize: 999,
				}
				that.$javaApi.doRequest("post", "/customerkt/integral/integralExpired", data).then(res => {
					if (res.data.code == 0) {

						this.jifen_list_length = res.data.data.list.length
					}

				})
			},
			// 去积分详情界面
			go_jifen() {
				uni.navigateTo({
					url: '/pages/my/integral_detail?integerTotal=' + this.integerTotal,
				})
			},
			tap(type) {
				this.type = type
				this.page = 1
				this.get_paihang()
			},
			// 去登录
			to_login() {
				this.get_user_sign_info()
				this.get_member()
				this.is_login = false
				this.token = uni.getStorageSync("token")
				this.getNewTask()
			},
			no_login() {
				this.is_login = false
			},
			goLogin() {
				this.is_login = true
			},
			goDump(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				});
			},
			get_user_sign_info() { //获取签掉信息
				var _this = this;
				_this.$api.doRequest("get", "api/user_sign_info").then(res => {

					_this.user_sign_info = res.data.data
				})
			},
			//获取用户信息
			get_member() {
				var data = {}
				var _this = this;
				_this.$api.doRequest("post", "api/userinfo", data).then(res => {

					_this.member = res.data.data;

					if (!_this.member || _this.member.nick_name.indexOf("游客") > -1) {
						// 是游客
						_this.is_login = true;
						_this.login_title = "同步最新数据，请先登录";
						uni.setStorageSync("token", "");
					} else {
						//不是游客
					}
					uni.setStorageSync("member_info", res.data.data);
					let unionid = res.data.data.unionid
					// 如果有unionid则截取第三位
					_this.barcodeNum = unionid ? unionid.substring(3) : ''
				})
			},
			//获取排行榜
			get_paihang() {
				let data = {
					code: 0,
					page: this.page,
					pageSize: 50
				}
				this.$NoteApi.doRequest("get", 'rank/today', data, 'json', true).then(res => {
					if (data.page === 1) {
						this.rnk_today_list = res.data.data
					} else {
						this.rnk_today_list.cityRank = this.rnk_today_list.cityRank.concat(res.data.data.cityRank)
						this.rnk_today_list.storeRank = this.rnk_today_list.storeRank.concat(res.data.data
							.storeRank)
					}

				})
			},
			end() {
				this.page++
				this.get_paihang()
			},
			set_is_show_qcode() {
				this.is_show_qcode = false
			},
			touchMove(e) {
				this.yanchi()
				// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
				var that = this;
				const query = uni.createSelectorQuery().in(that);
				query.select('.user-info-bottom').boundingClientRect(data => {
					if (data.top <= 20) {
						that.hBoxOpacity = 1
					} else {
						that.hBoxOpacity = 0
					}
				}).exec();
			},
			yanchi() {
				var that = this
				setTimeout(function() {
					that.touchMove({})
				}, 500)
			}
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F3F5F8;
		height: 100vh;
		overflow: auto;
	}

	.bai {
		background-color: #F3F5F8 !important;

	}

	.bai .signIn-card-box-top-text {
		color: #000000 !important;
	}

	.header {
		position: relative;
		width: 750upx;
		height: 550upx;
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/me_bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// border-radius: 0upx 0upx 100upx 100upx;
		overflow: hidden;
	}

	.header-qcode {
		position: absolute;
		right: 0;
		top: 180upx;
		width: 100upx;
		height: 80upx;
	}

	.h-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #5CAE77;
		z-index: 10;
		transition: all .5s linear;
		padding-bottom: 20upx;
	}

	.header-title {
		width: 100%;
		font-size: 36upx;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .3s linear;
		// background-color: red;
	}

	.user {
		width: 710upx;
		height: 150upx;
		margin: 0 auto;
	}

	.user-portrait {
		width: 150upx;
		height: 150upx;
		border-radius: 50%;
		position: relative;
		float: left;
		/* 	background-image: url();
  background-repeat: no-repeat;
  background-size: 100% 100%; */
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		box-sizing: border-box;
		// border: 2upx solid #FEA412;
	}

	.user-portrait-img {
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
		// border: .5upx solid #FEA412;
		box-shadow: 0upx 0upx 8upx #ccc;
	}

	.avatar-he {
		width: 107upx;
		height: 161upx;
		position: absolute;
		top: -45upx;
		left: -26upx;
	}

	.avatar-hongbao {
		width: 80upx;
		height: 68upx;
		position: absolute;
		bottom: 0upx;
		right: 0upx;
	}

	.user-info {
		float: left;
		margin-top: 20upx;
		margin-left: 20upx;
	}

	.user-info-top {
		display: flex;
		align-items: center;
	}

	.user-info-top-name {
		color: #fff;
		max-width: 220upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 40upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user-info-top-icon1 {
		width: 160upx;
		height: 60upx;
		line-height: 55upx;
		text-align: right;
		color: #fff;
		padding-right: 20upx;
		margin-left: 20upx;
		background-image: url(https://mes.renkangshangcheng.cn/appimage/lv-bgm.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.user-info-top-icon2 {
		height: 45upx;
		min-width: 160upx;
		color: #117232;
		margin-left: 20upx;
		display: flex;
		/* padding:0 30upx; */
		padding-right: 30upx;
		background-color: #DEEEE3;
		align-items: center;
		box-sizing: content-box;
		border-radius: 50upx 50upx 50upx 50upx;
		font-weight: 500;
	}

	.user-info-top-icon2 image {
		width: 60upx;
		margin-left: -10upx;
		margin-right: 10upx;
		height: 60upx;
	}

	.user-name {
		width: 30%;
		min-width: 30%;
		height: 100%;
		line-height: 110rpx;
		/* 调整为默认值 */
		font-size: 32rpx;
		color: #333;
		font-weight: 400;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block !important;
		text-align: center;
	}

	.user-info-bottom {
		color: #fff;
		margin-top: 10upx;
		background-color: #9CD495;
		width: 295upx;
		height: 42upx;
		line-height: 42upx;
		text-align: center;
		font-size: 28upx;
		color: #249549;
		border-radius: 4upx;
	}

	.withdrawal {
		width: 710upx;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin: 0 auto;
		border-radius: 20upx;
		margin-top: 43upx;
	}

	.withdrawal-content {
		display: flex;
		padding-bottom: 32rpx;
		align-items: center;
		justify-content: space-between;
	}

	.new-people-task-enter {
		padding: 32rpx 43rpx 32rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 2rpx solid #E7E7E7;

		.left {
			display: flex;
			align-items: center;
		}

		.new-people-task-text {
			font-family: "PingFangSC-Regular";
			font-size: 34rpx;
			color: #333333;
			font-weight: 400;
		}

		.reward-icon {
			width: 65rpx;
			height: 65rpx;
		}

		.right-arrow {
			width: 30rpx;
		}
	}

	.withdrawal-box2 {
		flex: 1;
		text-align: center;
		position: relative;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.jf-rd {
		position: relative;
	}

	.red-message {
		width: 20upx;
		height: 20upx;
		background-color: #FF4417;
		border-radius: 10upx;
		border: 3upx solid #fff;
		display: inline-flex;
		margin-left: -8upx;
		margin-bottom: 14upx;
	}

	.withdrawal-box3 {
		flex: 1.2;
	}

	.withdrawal-box-money {
		color: #fff;
		font-size: 38upx;
		font-weight: 500;
		position: relative;
	}

	.withdrawal-box-dy {
		color: #fff;
		font-size: 28upx;
		margin-left: 5upx;
	}

	.withdrawal-text {
		color: #fff;
		font-size: 30upx;
	}

	.withdrawal-xian {
		width: 1upx;
		height: 50upx;
		background-color: #3B8C57;
	}

	.withdrawal-box3-lq {
		width: 140upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 20upx;
		color: #fff;
		font-size: 20upx;
		margin: 0 auto;
		margin-top: 50upx;
		background-image: linear-gradient(to right, #ED9E2F, #FA5D0F);
	}

	.signIn {
		width: 710upx;
		height: 245upx;
		margin: 0 auto;
		margin-top: 20upx;
		background-color: #fff;
		border-radius: 20upx;
	}

	.signIn-title {
		height: 70upx;
		line-height: 70upx;
		border-bottom: 1px solid #f4f4f4;
	}

	.signIn-title-left {
		float: left;
		color: #000000;
		font-weight: 500;
		padding-left: 20upx;
	}

	.signIn-title-right {
		float: right;
		color: #F75B46;
		font-size: 15upx;
		padding-right: 20upx;
	}

	.signIn-card {
		display: flex;
	}

	.signIn-card-box {
		height: 120upx;
		width: 72upx;
		margin-left: 28upx;
		margin-top: 32upx;
	}

	.signIn-card-box-top {
		text-align: center;
		background-color: #FFCE2C;
		border-radius: 10upx;
	}

	.signIn-card-box-top-text {
		color: #fff;
		font-size: 15upx;
		padding-top: 5upx;
	}

	.signIn-card-box-top-img {
		width: 44upx;
		height: 28upx;
		margin: 0 auto;
		margin-top: 10upx;
		margin-bottom: 5upx;
	}

	.signIn-card-box-btm {
		font-size: 15upx;
		color: #FD603A;
		text-align: center;
		margin-top: 10upx;
		;
	}

	.order {
		width: 710upx;
		height: 200upx;
		margin: 0 auto;
		margin-top: 20upx;
		border-radius: 20upx;
		background-color: #fff;
		text-align: center;
	}

	.order-title {
		color: #000000;
		font-weight: 500;
		height: 70upx;
		line-height: 70upx;
		padding-left: 20upx;
		text-align: left;
		border-bottom: 1px solid #f4f4f4;
		margin-bottom: 20upx;
	}

	.order-img {
		width: 50upx;
		height: 50upx;
		margin: 0 auto;
	}

	.order-text {
		margin-top: 10upx;
		font-size: 15upx;
		color: #999;
	}

	.order-img-t {
		width: 50upx;
		height: 50upx;
		margin: 0 auto;
		margin-top: 20upx;
	}

	.header-two {
		width: 750upx;
		height: 466upx;
		background-color: #fff;
		text-align: center;
	}

	.header-two-title {
		width: 750upx;
		text-align: center;
		padding-top: 108upx;
		font-size: 34upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000;
	}

	.header-two-img {
		width: 146upx;
		height: 146upx;
		margin: 0 auto;
		margin-top: 70upx;
	}

	.header-go-login {
		color: #F75B46;
		font-size: 30upx;
	}

	.tap {
		margin-top: 24upx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30upx;
	}

	.tap .title {
		font-size: 28upx;
		font-weight: 600;
	}

	.tap-list {
		width: 690upx;
		height: 88upx;
		background-color: #D4E5DA;
		border-radius: 20upx;
		margin: 32upx auto;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		z-index: 10;
	}

	.tap-item {
		width: 50%;
		height: 100%;
		border-radius: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666666;
		font-size: 34upx;
	}

	.tap-items {
		color: #FFFFFF;
		background: #6CAE79;
		box-shadow: inset 0px 4upx 10upx 0px rgba(27, 148, 65, 0.8);
	}

	.tap-lists {
		width: 100%;
		// height: 840upx;
		background-color: #FFFFFF;
		border-radius: 16upx;
		box-sizing: border-box;
		padding: 0 24upx;
	}

	.tap-lists .top {
		width: 100%;
		height: 84upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.top .top-item {
		width: 30%;
		height: 100%;
		line-height: 84upx;
		text-align: center;
		font-size: 34upx;
		color: #999;
		border-radius: 8upx;
	}

	.top .top-item-two {
		width: 29%;
		height: 100%;
		line-height: 84upx;
		text-align: center;
		font-size: 34upx;
		color: #999;
		border-radius: 8upx;
	}

	.top .top-item-h {
		width: 1%;
		height: 100%;
		background-color: rgba(241, 241, 241, 1);
	}

	.tap-user {
		width: 750upx;
		height: 112upx;
		background: #EBF3FF;
		box-shadow: 0upx 4upx 12upx 0upx rgba(213, 230, 252, 0.3);
		border-radius: 38upx 38upx 0upx 0upx;
		position: absolute;
		// margin-left: -51upx;
		left: 0;
		box-sizing: border-box;
		padding: 0 54upx;
		display: flex;
		justify-content: space-around;

	}

	.tap-user view {
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		color: #333;
		font-weight: 400;
	}

	.num .num-msg {
		font-size: 26upx;
		color: #838383;
		font-weight: 400;
		width: 100%;
		height: auto;
	}

	.xiding {
		position: -webkit-sticky;
		position: sticky;
		top: 260upx;
	}

	.num-value {
		height: auto !important;
	}

	.tap-user .num {
		flex-direction: column;
		justify-content: center;

	}

	.num text {
		font-size: 34upx !important;
		color: #FFA01E !important;
	}

	.paihang-list {
		width: 100%;
		color: #000000;
		margin-top: 112upx;
		height: 1000upx;
		// overscroll-behavior-y: none;
		// overflow-x: auto;
	}

	.paihang-item {
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 104upx;
		border-bottom: 2upx solid #CCCCCC;
	}

	.paihang-item view {
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
	}

	.l-sjiaos {
		width: 0 !important;
		height: 0 !important;
		border-top: 16upx solid #D2E0F5;
		border-left: 30upx solid transparent;
		position: absolute;
		bottom: -15upx;
		left: 0;
	}

	.r-sjiaos {
		width: 0 !important;
		height: 0 !important;
		border-top: 16upx solid #D2E0F5;
		border-right: 30upx solid transparent;
		position: absolute;
		bottom: -15upx;
		right: 0;
	}

	.hong view {
		color: #FF4336 !important;
	}

	.zhezhao {
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		opacity: 0.5;
		z-index: 99;
		position: fixed;
		left: 0;
		top: 0;
	}

	.pop-qcode {
		width: 620upx;
		min-height: 720upx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 24upx;
		/* background-color: #FFFFFF; */
		background-size: 100% auto;
		z-index: 100;
		box-sizing: border-box;
	}

	.pop-qcode-box {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.pop-down {
		position: absolute;
		right: 0;
		bottom: 30upx;
		width: 50upx;
		height: 50upx;
	}

	.pop-gun {
		width: 3upx;
		height: 30upx;
		background-color: #fff;
		position: absolute;
		right: 25upx;
		bottom: 0;
	}

	.pop-qcode-img {
		position: absolute;
		// top: 80upx;
		left: 0;
		width: 620upx;
		height: 620upx;
		padding: 40upx;
		background-color: #fff;
		border-radius: 20upx;
	}

	.uqrcode {
		width: 100%;
		height: 100%;
	}

	.qcode {
		width: 630upx;
		height: 106upx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/img_bg_erweima@2x.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 40upx;
		font-size: 34upx;
		color: #fff;
	}

	.qcode-box {
		display: flex;
		align-items: center;
	}

	.qcode-icon {
		width: 38upx;
		height: 40upx;
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/icon_erweima@2x.png);
		background-size: 100% 100%;
		margin-right: 24upx;
	}

	.qcode-button {
		width: 168upx;
		height: 68upx;
		background: linear-gradient(219deg, #FFA539 0%, #FFB755 100%);
		font-size: 32upx;
		color: #fff;
		font-weight: 500;
		text-align: center;
		line-height: 68upx;
		border-radius: 34upx;
	}

	.top-box {
		height: 200upx;
		width: 100%;
		background-color: #5CAE77;
	}

	.item-value {
		font-size: 34upx;
		font-weight: 500;
	}

	.newTask {
		width: 50%;
		height: 100upx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 38upx;
		color: #333;
		box-sizing: border-box;
		padding: 0 30upx;
		margin: 0 auto;
	}

	.xian {
		width: 1upx;
		height: 48upx;
		background-color: #D8D8D8;
	}

	.icon-red {
		width: 40upx;
		height: 44upx;
		margin-right: 24upx;
	}

	.icon-red image {
		width: 100%;
		height: 100%;
	}

	.newTask-icon {
		margin-left: auto;
	}

	.info-item-box {
		width: 690upx;
		margin: 0 auto;
		margin-top: 24upx;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.info-item-box-border {
		border-bottom: 2upx solid #F1F1F1;
	}

	.top-notice-box {
		position: absolute;
		width: 750upx;
		top: 0upx;
		left: 0;
	}

	.pop-barcode-img {
		position: absolute;
		top: 650upx;
		left: 0;
		width: 620upx;
		height: 250upx;
		padding: 40upx;
		background-color: #fff;
		border-radius: 20upx;
	}

	.pop-barcode-img-title {
		text-align: center;
		font-weight: 500;
		font-size: 40upx;
	}

	.menu-box {
		width: 690rpx;
		height: 194rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx;
		position: relative;

		image {
			width: 70rpx;
			height: 70rpx;
		}

		&_tipsIcon {
			width: 100rpx !important;
			height: 44rpx !important;
			position: absolute;
			top: 0;
			right: 10rpx;
			object-fit: contain;
		}

		.info {
			width: 230rpx;
			height: 194rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.text {
			font-size: 38rpx;
			color: #333333;
			font-weight: 400;
			padding-top: 15rpx;
		}

		.line {
			width: 1upx;
			height: 48upx;
			background-color: #F3F5F8;
		}
	}

	.newMessage {
		position: absolute;
		top: 0;
		right: 10upx;
		width: 120upx;
		height: 46upx;
		background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/newMessage.png");
		background-size: 100% 100%;
	}
</style>